<script setup>
    import {computed, getCurrentInstance} from "vue"
    import { useRouter } from 'vue-router'
    
    const props = defineProps(['txt','page','sel','cls']);
	defineEmits('change')
    const router = useRouter();
	const content = getCurrentInstance();
    var bol = computed(()=>{
        return props.sel==props.page;
        // return false;
    })
    
    const changePage = ()=>{

        //点击跳转对应的页面
        router.push('/'+props.page);
        content.emit('change', props.page);  
    }
</script>
<template>
	<div class="itemWarp" :class="{active:bol}" @click='changePage'>
		<span v-show='!bol'>
			<slot name='normalImg'></slot>
		</span>
		<span v-show='bol'>
			<slot name='activeImg'></slot>
		</span>
		<i :class="cls"></i> 
		<span v-text='txt'></span>>
	</div>
</template>

<style type="text/css">
	.itemWarp{
		flex-grow: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
	.itemWarp.active {
		color: rgb(255, 0, 0);
	}
	.itemWarp i{
		font-size: 24px;
	}
	.itemWarp span{
		font-size: 12px;
	}
</style>